<template>
    <div class="songlist">
        <ul>
            <div class="searchtop">已为您找到{{total}}首单曲</div>
            <li class="litop"><div class="liname">标题</div><div class="linamename">歌手</div><div class="liainame">专辑</div></li>
            <li @click="licilck(item.id,item)" :class='{liindex:$store.state.indexid === item.id}' class="li" v-for="(item,index) in songlistdata" :key = 'item.id'>
            <div class="index">{{index+1}}</div>
            <div class="liname">{{item.name}}</div>
            <div class="linamename">{{item.artists[0].name}}</div>
            <div class="liainame">{{item.album.name}}</div>
            </li>
            <el-pagination
                @current-change = 'change'

                :current-page ='page'
                :page-size = '30'
                background
                layout="prev, pager, next"
                :total="total">
                </el-pagination>
            
             <!-- <div v-if="$store.state.login !==200" class="tishi">登录后查看更多...</div> -->

        </ul>
            
    </div>
</template>

<script>
import http from '@/http/http.js'
export default {
    data() {
        return {
            name:this.$route.params.name,
            songlistdata:[],
            playlist:{
                al:{
                    
                    picUrl:''

                },
                ar:[{
                    name:'',

                }],
                id:'',
                name:''

            },              //定义可以传入audio的数据结构
            total:100,
            page:1,//当前页面
            pages:0,
        
        }
    },
    watch:{
        $route(to , from){
            this.seachname()
        }
        //监听路由变化刷新页面

    },
    
    methods:{
        seachname(){
            http({
                url:'/search',
                params:{
                    keywords:this.$route.params.name
                }
            }).then(res=>{
                console.log(res)
                console.log('ddd')
                this.songlistdata = res.data.result.songs
                this.total = res.data.result.songCount
                this.page = 1

                // this.$store.commit('searnames',this.inputvalue)
                // this.$store.commit('searchname',res.data.result.songs)
            })
        },
        change(value){
            // console.log(value)
            this.page = value
            http({
                url:'/search',
                params:{
                    keywords:this.$route.params.name,
                    offset:(this.page-1)*30
                }
            }).then(res=>{
                console.log(res.data)
                this.songlistdata = res.data.result.songs
                // this.total = res.data.result.songCount
            })
        },
        licilck(id,value){
            // this.liindex = index
            this.$store.commit('indexxgai',id)
            console.log(id)
            //通过id请求音乐url地址
            http({
                url:'/song/url',
                params:{
                    id
                },      
            }).then(res=>{
                // console.log(res.data.data[0])
                this.$store.commit('musicurlhandle',res.data.data[0].url)
                this.$store.commit('isplaybofang')   
            })
            //点击的歌曲信息传入
            console.log(value)
            this.playlist.name = value.name
            this.playlist.id = value.id
            this.playlist.ar[0].name = value.artists[0].name
            this.playlist.al.picUrl = value.artists[0].img1v1Url
            this.$store.commit('musicuserhandle',this.playlist)
            console.log(this.$store.state.searchname)
            
            
        },
        
    },
    mounted() {
        this.seachname()
        // this.change()
      
    },
    
}
</script>

<style lang="less" scoped>
.searchtop{
    margin: 10px 0;
    font-size: 20px;
}
.songlist{
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-left: 20px;
    margin-bottom: 300px;
    // overflow-y: scroll;
    // height: 600px;
    // overflow: hidden;
    // justify-content: center;
}



ul{
    
    margin-top: 10px;
    li:nth-child(even){
        background-color: #f9f9f9;
    }
    min-width: 1400px;
}
.liindex{
    color: pink;
}
.li{
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-grow: 1;
    height: 40px;
    background-color: white;
    // border-top: 1px solid #666;
    font-size: 12px;
    line-height: 40px;

    .liname{
        padding-left: 60px;
        flex: 1.5;
    }
    .linamename{
        flex: 1;
    }
    .liainame{
        flex: 1;
    }
}
.li:hover{
    background-color: #f0f1f2;
    cursor: pointer;
}
.index{
        flex: 0.1;
        padding-left: 10px;
    }
.litop{
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    height: 40px;
    cursor: pointer;

    background-color: white;
    // border-top: 1px solid #666;
    font-size: 12px;
    line-height: 40px;
    
    .liname{
        padding-left: 110px;
        flex: 1.5;
    }
    .linamename{
        flex: 1;
    }
    .liainame{
        flex: 1;
    }
}
.tishi{
    text-align: center;
    font-size: 14px;
    margin-top: 10px;
    color: #666;
    cursor: pointer;
}
.list{
    height: 30px;
    cursor: pointer;
}
</style>